<template>
    <div class="article_main_box_css">
      <div class="article_box_css">
          <el-table :data="tableData" border style="width: 100%;height: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"/>
          <el-table-column label="id" width="100">
            <template #default="scope">
              <div>
                <span>{{ scope.row.id }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发布者" width="100">
            <template #default="scope">
              <div>
                <span>{{ scope.row.articleAuthor }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="文章标题" width="225">
            <template #default="scope">
              <div>
                <span>{{ scope.row.articleTitle}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="文章封面" width="200">
            <template #default="scope">
              <div>
                <img :src="scope.row.articleCover" style="width: 15vw;height: 10vh;"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="文章简介" width="400">
            <template #default="scope">
              <div>
                <span>{{ scope.row.articleInformation}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template #default="scope">
              <el-button size="small" @click="ArticlehandleEdit(scope.row.id, scope.row)" type="warning" style="width: 4vw; height: 3vh;"
                >修改</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row.id, scope.row)" style="width: 4vw; height: 3vh;"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="article_from_box_css" v-show="article_from_box_css">
        <div class="article_from_content_box_css">
            <el-form :label-position="labelPosition" label-width="80px" :model="articleformLabelAlign" style="margin: 5vh auto;width: 75%;height: 90%;">
              <el-form-item label="发布人">
                <el-input v-model="articleformLabelAlign.articlename"></el-input>
              </el-form-item>
              <el-form-item label="文章标题">
                <el-input v-model="articleformLabelAlign.articleregion"></el-input>
              </el-form-item>
              <el-form-item label="文章简介">
                <input type="text" style="width: 100%;height: 10vh;background-color: #fff;border: 1px solid rgba(0,0,0,.1);border-radius: 5px;" v-model="articleformLabelAlign.articledesc"/>
              </el-form-item>
              <el-form-item label="封面连接">
                <el-input v-model="articleformLabelAlign.articletype"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="updateArticle(articleformLabelAlign)">确定修改</el-button>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="ArticledeleteEdit">放弃修改</el-button>
              </el-form-item>
            </el-form>
        </div>
      </div>
    </div>
  </template>
    
    <script>
    import axios from 'axios'
    export default {
      name:'Article',
      data(){
        return{
          imageUrl: '',
          ArticleId:2,
          labelPosition: 'right',
          articleformLabelAlign: {
            articlename: '',
            articleregion: '',
            articletype: '',
            articledesc: ''
          },
          article_from_box_css:false,
          tableData:[
          ],
        }
      },
      methods:{
        ArticledeleteEdit(){
          this.article_from_box_css=false
        },
        ArticlehandleEdit(id,row){
          console.log(id, row)
          this.ArticleId=id
          this.article_from_box_css=true
          this.articleformLabelAlign.articlename=row.articleAuthor
          this.articleformLabelAlign.articleregion=row.articleTitle
          this.articleformLabelAlign.articletype=row.articleCover
          this.articleformLabelAlign.articledesc=row.articleInformation
        },
        updateArticle(formLabelAlign){
          // console.log(this.ArticleId)
          var that=this
          axios.get('http://127.0.0.1/UpdateArticle',{params:{
            articlename: formLabelAlign.articlename,
            articleregion: formLabelAlign.articleregion,
            articleid: that.ArticleId,
            articledesc: formLabelAlign.articledesc,
            articletype:  formLabelAlign.articletype,
          }}
          ).then(function(res){
            if(res.data==1){
              alert("修改成功")
              that.$router.go(0)
            }else{
              alert("修改失败请重试")
              that.$router.go(0)
            }
            that.article_from_box_css=false
          }).catch(function(error){
            console.log(error)
            alert("系统出现异常")
          })
        },
        handleDelete(index,row){
          var that=this
          console.log()
          axios.get('http://127.0.0.1/DeleteArticle',{params:{
            articleid:index,
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("删除成功")
              that.$router.go(0)
            }else{
              alert("删除失败")
              that.$router.go(0)
            }
          }).catch(function(error){
            console.log(error)
          })
        },
        handleSelectionChange(val){
          console.log(val)
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
    },
    mounted(){
      var that=this
      axios.get('http://127.0.0.1/Article')
      .then(function(res){
        for(var i=0;i<res.data.length;i++){
          that.tableData.push(res.data[i])
        }
      })
      .catch(function(error){
        console.log(error)
      })
    }
  }
    </script>
<style>
  .article_main_box_css{
    position: relative;
    width: 83vw;
    height: 86vh;
    /* background-color: red; */
  }
  .article_box_css{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .article_from_box_css{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .article_from_content_box_css{
    position: absolute;
    top:7vh;
    left: 24vw;
    width: 40%;
    height: 50%;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>